import { gql, useMutation, useQuery } from "@apollo/client";
import { Card, message, Modal, Input, Button, Form } from "antd";
import { useEffect, useState } from "react";
import gqlError from "../../../libs/gql-error";
import { Editor } from "primereact/editor";

export const GetWebsiteBasicInfoQuery = gql`
  query GetWebsiteBasicInfo {
    getWebsiteBasicInfo {
      phone
      email
      wechat
      postalCode
      address
      qqGroupQRCode
      webmasterWechat
    }
  }
`;

export const UpdateWebsiteBasicInfoMutation = gql`
  mutation UpdateWebsiteBasicInfo(
    $phone: String,
    $email: String,
    $wechat: String,
    $postalCode: String,
    $address: String,
    $qqGroupQRCode: String,
    $webmasterWechat: String
  ) {
    updateWebsiteBasicInfo(
      phone: $phone,
      email: $email,
      wechat: $wechat,
      postalCode: $postalCode,
      address: $address,
      qqGroupQRCode: $qqGroupQRCode,
      webmasterWechat: $webmasterWechat
    ){
      phone
      email
      wechat
      postalCode
      address
      qqGroupQRCode
      webmasterWechat
    }
  }
`;

export const GetWebsiteExamsQuery = gql`
  query GetWebsiteExams {
    getWebsiteExams
  }
`;

export const UpdateWebsiteExamsMutation = gql`
  mutation UpdateWebsiteExams($context: String!) {
    updateWebsiteExams(context: $context)
  }
`;

export const GetWebsiteIntroduceQuery = gql`
  query GetWebsiteIntroduce {
    getWebsiteIntroduce
  }
`;

export const UpdateWebsiteIntroduceMutation = gql`
  mutation UpdateWebsiteIntroduce($context: String!) {
    updateWebsiteIntroduce(context: $context)
  }
`;

const AdminWebsitePage = () => {
  const { data: basicInfoData, refetch: refetchBasicInfo } = useQuery(GetWebsiteBasicInfoQuery);
  const { data: examsData, refetch: refetchExams } = useQuery(GetWebsiteExamsQuery);
  const { data: websiteData, refetch: refetchWebsite } = useQuery(GetWebsiteIntroduceQuery);
  const [examsEditor, setExamsEditor] = useState<any>(null);
  useEffect(() => {
    setExamsEditor(examsData?.getWebsiteExams);
  }, [examsData])
  const [websiteEditor, setWebsiteEditor] = useState<any>(null);
  useEffect(() => {
    setWebsiteEditor(websiteData?.getWebsiteIntroduce);
  }, [websiteData])
  const [updateBasicInfo] = useMutation(UpdateWebsiteBasicInfoMutation, {
    onCompleted: () => {
      refetchBasicInfo();
      message.success("基本信息更新成功");
    },
    onError: (error) => {
      gqlError(error);
    }
  });

  const [updateExams] = useMutation(UpdateWebsiteExamsMutation, {
    onCompleted: () => {
      refetchExams();
      message.success("试卷下载页更新成功");
    },
    onError: (error) => {
      gqlError(error);
    }
  });
  const [updateWebsite] = useMutation(UpdateWebsiteIntroduceMutation, {
    onCompleted: () => {
      refetchWebsite();
      message.success("站点介绍页更新成功");
    },
    onError: (error) => {
      gqlError(error);
    }
  });

  const [examsModalVisible, setExamsModalVisible] = useState(false);
  const [websiteModalVisible, setWebsiteModalVisible] = useState(false);

  const [form] = Form.useForm();

  const showExamsModal = () => {
    setExamsModalVisible(true);
  };

  const showWebsiteModal = () => {
    setWebsiteModalVisible(true);
  };

  const handleBasicInfoSubmit = (values: any) => {
    updateBasicInfo({ variables: values });
  };

  const handleExamsSubmit = (value: string) => {
    updateExams({ variables: { context: value } });
    setExamsModalVisible(false);
  };

  const handleWebsiteSubmit = (value: string) => {
    updateWebsite({ variables: { context: value } });
    setWebsiteModalVisible(false);
  };

  useEffect(() => {
    form.setFieldsValue({
      ...basicInfoData?.getWebsiteBasicInfo,
    })
  }, [basicInfoData])
  return (
    <Card className="p-6">
      <div className="text-xl font-semibold mb-4">设置基本信息</div>
      <div className="flex gap-5">
        <div className="flex gap-2 flex-col">
          <Button type="primary" onClick={showExamsModal}>编辑试卷下载页</Button>
          <Button type="primary" onClick={showWebsiteModal}>编辑站点介绍页</Button>
        </div>
        <div className="w-96">
          <Form
            form={form}
            layout="vertical"
            onFinish={handleBasicInfoSubmit}
            initialValues={basicInfoData?.getWebsiteBasicInfo}
          >
            <Form.Item label="联系电话" name="phone">
              <Input />
            </Form.Item>
            <Form.Item label="邮箱" name="email" >
              <Input />
            </Form.Item>
            <Form.Item label="微信号" name="wechat">
              <Input />
            </Form.Item>
            <Form.Item label="邮政编码" name="postalCode">
              <Input />
            </Form.Item>
            <Form.Item label="地址" name="address" >
              <Input />
            </Form.Item>
            <Form.Item label="QQ群二维码" name="qqGroupQRCode">
              <Input />
            </Form.Item>
            <Form.Item label="站长微信号" name="webmasterWechat">
              <Input />
            </Form.Item>
            <Button type="primary" htmlType="submit" className="mt-4">
              更新基本信息
            </Button>
          </Form>

        </div>
        <Modal
          title="编辑试卷下载页"
          open={examsModalVisible}
          width={1000}
          onCancel={() => setExamsModalVisible(false)}
          onOk={() => {
            const html = examsEditor;
            handleExamsSubmit(html);
          }}
          okText="保存"
          cancelText="取消"
        >
          <Editor
            value={examsEditor}
            onTextChange={(e) => setExamsEditor(e.htmlValue as string)}
            style={{ minHeight: "500px" }}
          />
        </Modal>
        <Modal
          width={1000}
          title="编辑站点介绍页"
          open={websiteModalVisible}
          onCancel={() => setWebsiteModalVisible(false)}
          onOk={() => {
            const html = websiteEditor;
            handleWebsiteSubmit(html);
          }}
          okText="保存"
          cancelText="取消"
        >
          <Editor
            value={websiteEditor}
            onTextChange={(e) => setWebsiteEditor(e.htmlValue as string)}
            style={{ minHeight: "500px" }}
          />
        </Modal>
      </div>
    </Card>
  );
};

export default AdminWebsitePage;